<template>
	<div class="login">
		
		<div class="content">
			<h2>后台管理系统</h2>
			<div class="login_con">
				<el-input :class="{input:true}" v-model="input1" placeholder="请输入用户名"></el-input>
				
				<el-input :class="{input:true}" v-model="input2" type="password" placeholder="请输入密码"></el-input>
				<el-button :class="{btn:true}" type="primary" @click="login_btn">登陆</el-button>
				<p>Tips : 用户名和密码随便填</p>
			</div>
		
		</div>
	</div>
</template>

<script>
	export default{
		name:'login',
		data(){
			return{
				input1:'admin',
				input2:'123456'
			}
		},
		mounted(){
			this.forbid_back()
		},
		methods:{
			//禁止浏览器后退
			forbid_back(){
				//获取登录状态
				let user_info=JSON.parse(localStorage.getItem('user_info')) 
				console.log(user_info)
				if(user_info.LoginState=='-1'){//如果用户退出登录了，禁止返回
					this.history2()
					window.addEventListener('popstate', this.history2);
				}
				
			},
			//禁止返回的方法
			history2(){
				history.pushState(null, null, document.URL);
			},
			//点击登录
			login_btn(){
				if(this.input1==''||this.input2==''){
					this.$message.error('请输入用户名或密码');
				}
				this.$http.get('../../static/json/zuzhijigo.json',{}).then((res)=>{
					console.log(res)
					if(res.body.code==0){
						this.$message({
				          message: '恭喜你，登录成功',
				          type: 'success'
				        });
				        
				        this.$router.replace({name:'Index'})
				        //取消监听浏览器返回
				        window.removeEventListener('popstate',this.history2)
				        
					}
				})
				.catch((res)=>{
					console.log(res)
					this.$message.error('登录失败，404');
				})
			},
		},
	}
</script>
<!--npm install sass-loader node-sass --save-dev-->
<style scoped="scoped" lang="scss">
	.login{
		background: #324157;width: 100%;height: 100%;
		.content{
			width: 360px;height: 250px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
			h2{color: white;font-size: 28px;margin-top: -80px;}
			.login_con{
				background:#fff;width: 100%;height: 250px;margin-top: 40px;border-radius:5px;padding: 40px 10px;box-sizing: border-box;
				.input{
					width: 80%;margin-top: 10px;
				}
				.btn{
					width: 80%;margin-top: 10px;
				}
				p{
					width: 80%;font-size: 12px;color: #ddd;margin:10px auto 0;text-align: left;
				}
			}
			
		}
	}
	
</style>